<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :modal="true"
      top="10vh"
      @closed="closed"
    >
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">

          <el-form-item label="图层">
            <treeselect v-model="queryForm.srcId"
            noOptionsText="无数据."
            noResultsText="无数据."
            noChildrenText="无数据."
            :normalizer="normalizer"
            @select="select"
            placeholder="请选择..."
            :options="srcTreeOptions" style="width: 18.75rem;" />
          </el-form-item>


          <el-form-item label="">
            <el-input v-model="queryForm.keywords" placeholder="请输入关键字" style="width: 18.75rem;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search"  size="mini" :loading="loading" @click="onQuerySubmit">查询</el-button>
            <el-button type="info" icon="el-icon-refresh"  size="mini" :loading="loading" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>

      <el-table
        :data="tableData"
        border
        empty-text="暂无数据."
        border
        @select="handleSelectionChange"
        ref="multipleSelectPOITable"
        style="width: 100%">
        <el-table-column
              type="selection"
              width="55">
            </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>

      </el-table>

      <el-row>
        <el-col :span="24">
          <div align="right" style="margin-top: 0.3125rem;">
            <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit" :total="page.total" @current-change="handleCurrentChange" />
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import {
    getUnSelectedList,
    saveSceneLayerSrc
  } from '@/api/51world/sceneLayerSrc.js'

  import {
    getSceneSrcTree
  } from '@/api/51world/sceneSrc.js'

  import {
    isOk
  } from '@/utils/request'

  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'SelectLayerElementTableDialog',
  components: {
    Treeselect
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: true,
      title: '',
      buttonLoading: false,
      srcData: {
      },
      loading:false,
      queryForm:{
        keywords:'',
        srcId:undefined,
        layerId:'',
        type:''
      },
      page: {
        cur: 1,
        limit: 10,
        total: 0
      },
      tableData: [],
      multipleSelection: [],
      srcTreeOptions:[],
      selected:[]
    }
  },
  computed: {

  },
  watch: {
    dialogVisible: {
      handler: function(value) {
        this.visible = value
      },
      immediate: true,
      deep: false
    },
    dialogData: {
      handler: function(nValue) {
        this.title = '请勾选需要添加的元素'
        if (nValue) {
          this.srcData=nValue;
        }
      },
      immediate: true,
      deep: false
    }
  },
  mounted: function() {
  },
  created() {
    this.loadSelectTree();
  },
  methods: {
    normalizer(node){
        if(node.children && !node.children.length){
            delete node.children;
        }
        return {
            id: node.id,
            label:node.name,
            children:node.children
        }
    },
    loadSelectTree(){
      this.loading=true
      getSceneSrcTree({
        parentId:'0',
      }).then(response => {
        this.loading=false
        if(isOk(response)){
          this.srcTreeOptions=response.data;
        }
      }).catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.loading = false
      })
    },
    indexMethod(index) {
      return index +1;
    },
    onQuerySubmit(event) {
      this.load()
    },
    onReset(event) {
      this.queryForm.keywords='';

     // this.load()
    },
    select	(node,instanceId){
      this.queryForm.type=node.type
    },
    load(){
      this.loading=true
      getUnSelectedList({
        cur: this.page.cur,
        limit: this.page.limit,
        keywords: this.queryForm.keywords,
        srcId: this.queryForm.srcId,
        type: this.queryForm.type,
        layerId:this.srcData.id,
      }).then(rsp => {
        if(200==rsp.code){
          if(!rsp.data){
            this.tableData=[];
            this.page.total = 0
             return;
          }
          const _data = rsp.data.list
          this.page.total = rsp.data.totalRow
          this.tableData = _data
          this.loading = false
        }
      }).catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.loading = false
      })
    },
    handleCurrentChange(cur) {
      this.page.cur = cur
      this.load()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(selection, row) {
      console.log(row)
     // this.multipleSelection = val;
    },
    submitForm(){
      let rows = this.$refs.multipleSelectPOITable.selection;
      if (rows.length == 0) {
        this.$message({
          message: '请勾选需要添加的元素！',
          type: 'warning'
        });
        return;
      }

      let ids="";
      rows.forEach(row => {
        ids += row.id + ','
      });
      this.$confirm('确定需要添加元素吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading=true
        saveSceneLayerSrc({
          layerId: this.srcData.id,
          ids: ids,
          type:this.queryForm.type
        }).then(response => {
          this.$message({
            message: response.message,
            type: 'success',
            duration: 500
          })
          this.load()
          this.loading=false
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      })

    },
    closed: function() {
      this.$emit('closed', false)
    }
  }
}
</script>

<style lang="scss">
  .info-dialog {

  }
</style>
